<template>
  <div>
    <h1>新增角色</h1> <br>
    角色名称
    <el-input v-model="role_name" style="width: 240px" placeholder="请输入姓名"/>
    <br>
    角色权限
    <span v-for="(itme,key) in checkedlist" :key="key">
      <el-checkbox v-model="checked" :value="itme.id" :label="itme.resource_name" size="large"/>
    </span>
    <br>

    <span v-for="(itme,key) in checkedzilist" :key="key">
      <el-checkbox v-model="checked" :value="itme.id" :label="itme.resource_name" size="large"/>
    </span>
    <br>
    <el-button @click="toadd">添加</el-button>
  </div>
</template>
<script setup>
import {ref, onMounted} from "vue";
import axios from "axios";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
let router=useRouter()
let checkedlist = ref([])
let checkedzilist = ref([])
let role_name=ref("")
let checked=ref([])
const toadd = () => {
  console.log(checked.value)
  axios.post("http://127.0.0.1:8000/tadmin/addAPI/?checked="+checked.value,{'role_name':role_name.value}).then(res=>{
    if (res.data.code == 200) {
      router.push('/role')
    ElMessage.success(res.data.msg)
    }else {
      ElMessage.error("添加失败")
    }

  })
}

const all = () => {
  axios.get("http://127.0.0.1:8000/tadmin/all/").then(res => {
    checkedlist.value = res.data
    for (let i = 0; i < checkedlist.value.length; i++) {
      let id = checkedlist.value[i].id
      allby(id)
    }
  })
}
const allby = (id) => {
  axios.get("http://127.0.0.1:8000/tadmin/allby/?id=" + id).then(res => {
    checkedzilist.value = res.data

  })

}

onMounted(() => {
  all()

})

</script>
